---
title: Radial Gradient
date: 2023-07-12
description: A circular gradient that can be used as a background for a component.
author: dillionverma
published: true
video: https://cdn.magicui.design/radial-gradient.mp4
---

<ComponentPreview name="radial-gradient-demo" />

<Steps>

### Installation

Copy and paste the following code into your project.

```text
components/magicui/radial-gradient.tsx
```

<ComponentSource name="radial-gradient" />

</Steps>

## Props

### Radial Gradient

| Prop      | Type   | Description                 | Default               |
| --------- | ------ | --------------------------- | --------------------- |
| type      | string | Shape of the gradient       | circle                |
| from      | string | Color of the gradient start | rgba(120,119,198,0.3) |
| to        | string | Color of the gradient end   | hsla(0, 0%, 0%, 0)    |
| size      | number | Size of the gradient        | 300                   |
| origin    | string | Origin of the gradient      | center                |
| className | string | Class name of the gradient  | ""                    |
